<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 70%;
            margin: 0 auto;
            min-width: 800px;
            background-color: antiquewhite;
        }

        .container::after {
            content: '';
            display: block;
            clear: both;
        }

        .left {
            width: 300px;
            float: left;
            /* 1.父元素高度塌陷（伪元素）  2.兄弟元素掉下面了（over：hidden） */
            background-color: aqua;
        }

        .main {
            overflow: auto;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="container">
        <aside class="left">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores debitis libero
            assumenda, quaerat quas pariatur quia! In non minima quidem voluptas atque, illum modi sit, excepturi
            molestias esse voluptate deleniti magni architecto nulla saepe recusandae expedita eum fugiat consectetur
            neque fugit ipsa consequatur ullam. Incidunt labore mollitia nihil, eius excepturi tempore iure corrupti
            dolorem dignissimos amet voluptatibus perspiciatis quis atque nam neque itaque rerum dolore fugiat
            perferendis ipsam blanditiis. Placeat eum officia odit quidem quos voluptas consequatur accusantium velit
            nam? Neque odit suscipit illum beatae aspernatur fugiat iure voluptatibus eum, similique dolor minus
            dolorem, id enim maxime dolore tenetur illo.</aside>
        <div class="main">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi nulla, quas architecto fugit
            magni sunt ducimus tempora praesentium ab debitis est assumenda, veniam iure voluptatum laboriosam
            exercitationem. Impedit, facere nemo. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat ad
            voluptate debitis possimus itaque. Nostrum quaerat corporis reiciendis explicabo sapiente repellat totam
            inventore non atque repudiandae quibusdam delectus iusto aut, numquam harum ut dolorum et eaque nesciunt
            quod provident voluptate itaque. Optio libero ipsam illum vel! Voluptas, omnis ad! Culpa vero eligendi neque
            corporis quaerat id doloribus, blanditiis nobis reiciendis exercitationem et perferendis. Ipsum minima
            quaerat necessitatibus sunt porro adipisci praesentium voluptates inventore, corrupti modi quibusdam rerum,
            accusamus labore qui mollitia? Commodi ut iste iure quod repellat nam atque esse sunt. Obcaecati magnam nam
            culpa modi tempore dolor suscipit nostrum.</div>
    </div>

</body>

</html>